
<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>test-1</title>
	<style>
		html,
		body,
		ul,
		p {
			padding: 0;
			margin: 0;
		}

		body {
			background-color: #333;
		}

		ul {
			list-style: none;
		}

		.map {
			width: 450px;
			height: 450px;
			margin: 50px auto;
			position: relative;
		}

		.map ul {
			width: 450px;
			height: 450px;
			background-color: #ccc;
		}

		.map ul li {
			width: 126px;
			height: 126px;
			padding: 10px;
			border: 2px solid #333;
			position: absolute;
		}

		.map ul li:nth-child(1) {
			left: 0px;
			top: 0px;
		}

		.map ul li:nth-child(2) {
			left: 150px;
			top: 0px;
		}

		.map ul li:nth-child(3) {
			left: 300px;
			top: 0px;
		}

		.map ul li:nth-child(4) {
			left: 300px;
			top: 150px;
		}

		.map ul li:nth-child(5) {
			left: 300px;
			top: 300px;
		}

		.map ul li:nth-child(6) {
			left: 150px;
			top: 300px;
		}

		.map ul li:nth-child(7) {
			left: 0px;
			top: 300px;
		}

		.map ul li:nth-child(8) {
			left: 0;
			top: 150px;
		}

		.map ul li:nth-child(9) {
			left: 150px;
			top: 150px;
		}

		.map ul li a {
			width: 126px;
			display: block;
			color: #333;
			text-decoration: none;
			text-align: center;
		}

		.map ul li a p {
			font-size: 12px;
		}

		.map ul li button {
			width: 126px;
			height: 126px;
			cursor: pointer;
			border-radius: 50%;
			outline: none;
			border: 0;
		}

		.txt {
			display: none;
			font-size: 30px;
		}

		.map ul li.active {
			border: 2px solid orange;
			background-color: rgba(0, 0, 0, 0.5);
		}

		#startButton {
			width: 126px;
			height: 126px;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			border: 1px solid #ccc;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="map">
			<ul>
				<li class="active">
					<a href="">
						<img src="./images/lottery_01.png" alt="">
						<p>京东卡</p>
						<p>10元</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_02.png" alt="">
						<p>京东卡</p>
						<p>20元</p>

					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_03.png" alt="">
						<p>京东卡</p>
						<p>30元</p>

					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_04.png" alt="">
						<p>京东卡</p>
						<p>100元</p>

					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_05.png" alt="">
						<p>谢谢参与</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_06.png" alt="">
						<p>京东卡</p>
						<p>200元</p>

					</a>
				</li>
				<li>
					<a href="">
						<img src="./images/lottery_07.png" alt="">
						<p>京东卡</p>
						<p>500元</p>

					</a>
				</li>

				<li>
					<a href="">
						<img src="./images/lottery_08.png" alt="">
						<p>iQOO Pro</p>
						<p>手机</p>
					</a>
				</li>
			</ul>
			<div>
				<button id="startButton">抽奖</button>
			</div>
		</div>
	</div>

</body>

</html>

<script>
	// 需求：
	//  定义一个Game构造函数 （2分）
	//  在构造函数里添加程序所需要属性  （10分）
	//  高亮的边框至少绕着按钮转3圈，然后才能选择奖品（10分）
	//  在原型对象上添加所需的方法，例如产生指定范围的随机数（3分）
	//  点击"抽奖"按钮 ， 开始随机抽奖，高亮的边框，依次顺时针在奖品上切换，并设置按钮的文本为“进行中..”（15分）
	//  抽奖结束，提示中奖结果，重置显示"抽奖" （10分）


	// 编码：
	function Game() {
		// 添加属性
		this.elements = document.querySelectorAll(".map ul li");
		this.startButton = document.querySelector("#startButton");
		// 标签数组长度（选项）
		this.len = this.elements.length;
		// 记录圈数
		this.count = 0;
		// 计数器变量
		this.num = 0;
		// 索引值（用于选择奖品）
		this.index = 0;
		// 记录定时器
		this.timer = null;
	}
	Game.prototype.random = function (min, max) {
		// 返回执行范围的随机数
		return Math.floor(Math.random() * (max - min) + min);
	}
	Game.prototype.run = function () {
		// 排他思想
		for (var i = 0; i < this.len; i++) {
			this.elements[i].className = "";
		}
		// 切换奖品
		this.elements[this.index].className = "active";
	}
	Game.prototype.play = function () {
		// 记录当前函数作用域的this
		var _this = this;
		// 随机数字（随机挑奖品）
		var minV = (this.len - 1) * 3;
		var maxV = (this.len - 1) * 6;
		var randomNumber = this.random(minV, maxV);
		// 执行定时器函数
		this.timer = setInterval(function () {
			// 计数器变量自增
			_this.num++;
			// 索引值自增
			_this.index++;
			// 判断执行了多少圈
			if (_this.index > _this.len - 1) {
				// 每跑完一圈+1
				_this.count++;
				// 重置索引值
				_this.index = 0;
				console.log("执行了第"+(_this.count)+"圈");
			}
			// 跑了三圈以上以及等于随机数字 即可停止抽奖
			if (_this.count >= 3 && _this.num == randomNumber) {
				// 停止定时器
				clearInterval(_this.timer);
				// 设置文本
				_this.startButton.innerText = "继续";
				// 重置数据
				_this.count = 0;
				_this.num = 0;
				// 这是选中的奖品
				console.log(_this.elements[_this.index].querySelector("p:last-child").innerText);
			}
			// 设置奖品选项高亮
			_this.run();
		}, 100)
	}
	Game.prototype.init = function () {
		// 记录当前函数作用域的this
		var _this = this;
		// 点击事件
		this.startButton.onclick = function () {
			// 使用定时器函数 先清除定时器函数
			clearInterval(_this.timer);
			// 设置文本
			_this.startButton.innerText = "进行中..."
			// 开始抽奖
			_this.play();
		}
	}

	// 创建构造函数的实例 并调用初始化函数
	new Game().init();
</script>